<template>
  <List ref="list" class="product" component-name="NavFilter" :finished.sync="finished" :reset-fun="resetData" :load="load" :refresh="load">
    <Cover v-for="(p,i) in list" :key="i" class="list-cover-item" :src="p.picUrl" :name="p.atlasName" @click.stop.native="cilckCoverHandle(p)" />
  </List>
</template>
<script>
import List from '@/components/List'
import Cover from './components/Cover'

import { getTreeById } from '@/apis/atlas'
import { atlas } from '@/apis/search'
import { mapGetters } from 'vuex'
export default {
  name: 'Atlas',
  components: {
    List,
    Cover
  },
  props: {
    searchValue: {
      type: String,
      default: ''
    }
  },
  refresh: true,
  data() {
    return {
      list: [],
      finished: false
    }
  },
  computed: {
    ...mapGetters('nav', ['gotoValue', 'isLast', 'filterData']),
    isSearch() {
      return this.$route.name === 'SearchAtlas'
    }
  },
  watch: {
  },
  activated() {
    // this.getFilterData(atlasAttribute)
  },
  created() {
    this.$on('refresh', this.resetPageData)
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const ajax = this.isSearch ? this.searchData : this.getTreeByIdData
      return ajax(page, rows)
    },
    // 搜索
    searchData(page, rows) {
      const selectedData = this.$extrFilterData(this.filterData)
      const data = {
        ev: this.$extrFIlterEvsValueByFlag(selectedData, 'atlasAttrs'),
        keyword: this.searchValue,
        isLast: 0,
        levelType: ['SECOND'],
        page,
        rows
      }
      return atlas(data).then(res => {
        const data = res.data.atlasPageDTOS
        this.list = [...data.records]
        if (this.list.length >= data.totalRows) {
          this.finished = true
        }
      })
    },
    // 图册数据
    getTreeByIdData() {
      return getTreeById(this.gotoValue).then(res => {
        this.list = res.data
        // if (res.data.length === 0) {
        this.finished = true
        // }
      })
    },
    resetData() {
      this.list = []
    },
    cilckCoverHandle(p) {
      if (p.isLast === 1) {
        this.$router.push({ name: 'AtlasLastPreview', params: { id: p.id }, query: { atlasName: p.atlasName }})
      } else {
        this.$router.push({ name: 'AtlasChild', params: { id: p.id }, query: { atlasName: p.atlasName, levelType: p.levelType }})
      }
    }
  }
}
</script>
<style lang="less" scoped>
.photo-atlas{
  .list-cover-item + .list-cover-item{
    margin-top: 10px;
  }
}
</style>
